<template>
  <div id="analysis">
    <el-form
      class="analysis"
      :model="analysisForm"
      :rules="analysis"
      inline
      label-width="120px"
    >
      <h4 class="title">
        <span />
        <b>百度商业账号</b>
      </h4>

      <el-form-item
        label="百度账号"
        :prop="
          analysisForm.baidu_analysis_account ||
          analysisForm.baidu_analysis_password ||
          analysisForm.baidu_analysis_token
            ? 'baidu_analysis_account'
            : ' '
        "
      >
        <el-input
          v-model="analysisForm.baidu_analysis_account"
          class="left"
          placeholder="请输入账号"
        />
      </el-form-item>
      <el-form-item
        label="密码"
        :prop="
          analysisForm.baidu_analysis_account ||
          analysisForm.baidu_analysis_password ||
          analysisForm.baidu_analysis_token
            ? 'baidu_analysis_password'
            : ' '
        "
      >
        <el-input
          v-model="analysisForm.baidu_analysis_password"
          type="password"
          class="right"
          placeholder="请输入密码"
        />
      </el-form-item>
      <el-form-item
        label="token"
        :prop="
          analysisForm.baidu_analysis_account ||
          analysisForm.baidu_analysis_password ||
          analysisForm.baidu_analysis_token
            ? 'baidu_analysis_token'
            : ' '
        "
      >
        <el-input
          v-model="analysisForm.baidu_analysis_token"
          type="password"
          class="left"
          placeholder="请输入token"
        />
      </el-form-item>
      <h4 class="title">
        <span />
        <b>谷歌统计账号</b>
      </h4>
      <el-form-item
        label="谷歌账号"
        :prop="
          analysisForm.google_analysis_token ||
          analysisForm.google_analysis_account ||
          analysisForm.google_analysis_password
            ? 'google_analysis_account'
            : ' '
        "
      >
        <el-input
          v-model="analysisForm.google_analysis_account"
          class="left"
          placeholder="请输入账号"
        />
      </el-form-item>
      <el-form-item
        label="密码"
        :prop="
          analysisForm.google_analysis_token ||
          analysisForm.google_analysis_account ||
          analysisForm.google_analysis_password
            ? 'google_analysis_password'
            : ' '
        "
      >
        <el-input
          v-model="analysisForm.google_analysis_password"
          type="password"
          class="right"
          placeholder="请输入密码"
        />
      </el-form-item>
      <el-form-item
        label="token"
        :prop="
          analysisForm.google_analysis_token ||
          analysisForm.google_analysis_account ||
          analysisForm.google_analysis_password
            ? 'google_analysis_token'
            : ' '
        "
      >
        <el-input
          v-model="analysisForm.google_analysis_token"
          type="password"
          class="left"
          placeholder="请输入token"
        />
      </el-form-item>
      <el-form-item label=" ">
        <el-button class="save" type="primary" @click="saveAnalysis">
          保存
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import systemApi from '@/api/system/system.js'
export default {
  props: ['data'],
  data() {
    return {
      filesData: '',
      analysisForm: {
        group: this.data.group,
        baidu_analysis_token: '',
        baidu_analysis_account: '',
        baidu_analysis_password: '',
        google_analysis_token: '',
        google_analysis_account: '',
        google_analysis_password: '',
        baidu_analysis: '1',
        google_analysis: '1'
      },
      analysis: {
        baidu_analysis_token: [
          { required: 'true', message: '请输入token', trigger: 'blur' }
        ],
        baidu_analysis_account: [
          { required: 'true', message: '请输入百度账号', trigger: 'blur' }
        ],
        baidu_analysis_password: [
          { required: 'true', message: '请输入密码', trigger: 'blur' }
        ],
        google_analysis_token: [
          { required: 'true', message: '请输入token', trigger: 'blur' }
        ],
        google_analysis_account: [
          { required: 'true', message: '请输入百度账号', trigger: 'blur' }
        ],
        google_analysis_password: [
          { required: 'true', message: '请输入密码', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.filesData = this.data.children

    this.filesData.forEach(el => {
      el.children.forEach(item => {
        this.analysisForm[item.title] = item.value
      })
    })
  },
  methods: {
    // 编辑设置
    // onInputBlur(item) {
    //   const data = {
    //     id: item.id,
    //     value: item.value,
    //     title: item.title,
    //     group: item.group
    //   }
    //   systemApi.sysUpdate(data).then(res => {
    //     if (res.code == 0) {
    //       this.$message.success(res.msg)
    //     }
    //   })
    // }
    saveAnalysis() {
      if (
        !this.analysisForm.google_analysis_token ||
        !this.analysisForm.google_analysis_account ||
        !this.analysisForm.google_analysis_password
      ) {
        this.analysisForm.google_analysis = 2
      }
      if (
        !this.analysisForm.baidu_analysis_token ||
        !this.analysisForm.baidu_analysis_account ||
        !this.analysisForm.baidu_analysis_password
      ) {
        this.analysisForm.baidu_analysis = 2
      }
      systemApi.sysUpdate({ ...this.analysisForm }).then(res => {
        if (res.code == 0) {
          this.$message.success(res.msg)
        }
      })
    }
  }
}
</script>

<style lang="scss">
#analysis {
  .analysis.el-form--inline .el-form-item__content {
    width: calc(100% - 150px);
  }
}
</style>
<style scoped></style>
